<template>
  <div>
      <h2>文章列表页</h2>  
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章标题"
        width="400">
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="create_date"
        label="日期">
         <template slot-scope="scope">
        {{ scope.row.create_date.slice(0,10) }}
      </template>
      </el-table-column>
       <el-table-column
        label="操作">
         <template slot-scope="scope">
        <el-button type="priamy" @click="$router.push(`/undit?id=${scope.row.id}`)">编辑</el-button>
        </template>
      </el-table-column>
 
    </el-table>
       <el-row type="flex" justify="center">
           <el-pagination
         
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
/>
       </el-row>
  </div>
</template>

<script>
import {getPostList} from '@/api'
export default {
    data () {
      return {
        list:[],
        pageSize:5,
        pageIndex:1,
        total:0,
        currentPage:1
      }
    },
    mounted () {
      this.getListData()
    },
    methods: {
      getListData(){
        getPostList({pageSize:this.pageSize,pageIndex:this.pageIndex}).then((res)=>{
          console.log(res);  
           this.list=res.data.data
          //  把总数页存起来，用于分页器
           this.total=res.data.total
        })
      },
      // 点击页容量，自动触发的事件
      handleSizeChange(pageSize){
        // 更新页容量
        this.pageSize=pageSize
        // 根据新的页容量，发送新的请求，内部更新 list，表格就会自动渲染
        this.getListData()
      },
      handleCurrentChange(pageIndex){
        // 把点击的页码更新到 pageIndex 数据中
        this.pageIndex=pageIndex
         // 根据新的页码，发送新的请求，内部更新 list，表格就会自动渲染
        this.getListData()
      }
    }
}
</script>

<style lang="less" scoped>

</style>